<template>
  <div class="app-container">
    <el-card>
      <div slot="header">
        <el-button type="primary" @click="handleAdd"
          >增&emsp;&emsp;加</el-button
        >
        <el-button type="danger" @click="handleDeleteAll">一键删除</el-button>
      </div>
      <div>
        <el-table :data="menuList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="id" label="序号"> </el-table-column>
          <el-table-column prop="title" label="分类名称"> </el-table-column>
          <el-table-column prop="is_join_suit" label="是否加入套装">
            <template slot-scope="{ row }">
              <el-tag v-if="row.is_join_suit === 1" type="success">是</el-tag>
              <el-tag v-else type="info">否</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="is_join_discount" label="是否加入折扣">
            <template slot-scope="{ row }">
              <el-tag v-if="row.is_join_discount === 1" type="success"
                >是</el-tag
              >
              <el-tag v-else type="info">否</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="is_join_activity" label="是否加入活动">
            <template slot-scope="{ row }">
              <el-tag v-if="row.is_join_activity === 1" type="success"
                >是</el-tag
              >
              <el-tag v-else type="info">否</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="is_join_nobility" label="是否加入爵位">
            <template slot-scope="{ row }">
              <el-tag v-if="row.is_join_nobility === 1" type="success"
                >是</el-tag
              >
              <el-tag v-else type="info">否</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="is_join_rarity" label="是否加入稀有">
            <template slot-scope="{ row }">
              <el-tag v-if="row.is_join_rarity === 1" type="success">是</el-tag>
              <el-tag v-else type="info">否</el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="date" label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="small"
                plain
                @click="handleEdit(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="small"
                plain
                @click="handleDelete(scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <!-- 删除弹框 -->
    <el-dialog
      title="确定删除吗?"
      :visible.sync="deleteDialogVisible"
      width="435px"
    >
      <span style=""
        ><em style="font-style: normal; color: red">删除后不可恢复</em
        >，你还要继续吗？</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirmDel">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      v-dialogDrag
      :title="titleMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      @close="handleClose"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="200px"
        class="demo-ruleForm"
      >
        <el-form-item label="上级分类" prop="parent_id">
          <el-select v-model="form.parent_id" placeholder="请选择上级分类">
            <el-option
              v-for="item in transformers_options"
              :key="item.id"
              :value="item.id"
              :label="item.title"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类名称" prop="cate_name">
          <el-input
            v-model="form.cate_name"
            placeholder="请输入分类名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="form.sort" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="是否显示" prop="is_show">
          <el-radio v-model="form.is_show" :label="1">显示</el-radio>
          <el-radio v-model="form.is_show" :label="0">隐藏</el-radio>
        </el-form-item>
        <el-form-item label="加入套装专区" v-if="form.parent_id === 6">
          <el-radio v-model="form.is_join_suit" :label="1">是</el-radio>
          <el-radio v-model="form.is_join_suit" :label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="加入活动专区" v-if="form.parent_id === 6">
          <el-radio v-model="form.is_join_activity" :label="1">是</el-radio>
          <el-radio v-model="form.is_join_activity" :label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="加入折扣专区" v-if="form.parent_id === 6">
          <el-radio v-model="form.is_join_discount" :label="1">是</el-radio>
          <el-radio v-model="form.is_join_discount" :label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="加入爵位专区" v-if="form.parent_id === 6">
          <el-radio v-model="form.is_join_nobility" :label="1">是</el-radio>
          <el-radio v-model="form.is_join_nobility" :label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="加入稀有专区" v-if="form.parent_id === 6">
          <el-radio v-model="form.is_join_rarity" :label="1">是</el-radio>
          <el-radio v-model="form.is_join_rarity" :label="0">否</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="handleConfirm">
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getData,
  postData,
  putData,
  deleteData,
  getTransformersData
} from "@/api/personalizedMall/categories";

export default {
  name: "Categories",
  data() {
    return {
      // listQuery: {
      //   page: 1,
      //   per_page: 10
      // },
      menuList: [],
      total: 0,
      multipleSelection: [],
      deleteDialogVisible: false,
      dialogStatus: "",
      // dialog的头部信息
      titleMap: {
        update: "编辑",
        create: "新增"
      },
      dialogFormVisible: false,
      transformers_options: [],
      form: {
        id: undefined,
        parent_id: undefined,
        cate_name: undefined,
        discount_rate: undefined,
        sort: undefined,
        is_show: 0,
        is_join_suit: 0,
        is_join_discount: 0,
        is_join_activity: 0,
        is_join_nobility: 0,
        is_join_rarity: 0
      },
      rules: {
        parent_id: [
          { required: true, message: "请选择上级分类", trigger: "change" }
        ],
        cate_name: [
          { required: true, message: "请输入分类名称", trigger: "blur" }
        ],
        sort: [{ required: true, message: "请输入排序", trigger: "blur" }]
      }
    };
  },
  created() {
    this.handleGetData();
    this.handleGetTransformersData();
  },
  methods: {
    // 获取列表数据
    handleGetData() {
      getData().then(res => {
        this.menuList = res.data;
      });
    },
    handleGetTransformersData() {
      getTransformersData().then(res => {
        this.transformers_options = res.data;
      });
    },
    // 添加数据
    handleAdd() {
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
    },
    // 编辑数据
    handleEdit(row) {
      this.dialogStatus = "update";
      for (let key in this.form) {
        if (key === "cate_name") {
          this.form[key] = row["title"];
        } else {
          this.form[key] = row[key];
        }
      }
      this.dialogFormVisible = true;
    },
    // 确认添加
    handleConfirm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.dialogStatus === "create") {
            postData(this.form).then(res => {
              if (res.code === 200) {
                this.handleGetData();
                this.dialogFormVisible = false;
                this.$notify({
                  type: "success",
                  message: "操作成功",
                  position: "bottom-right",
                  showClose: false,
                  duration: 3000
                });
              }
            });
          } else {
            putData(this.form).then(res => {
              if (res.code === 200) {
                this.handleGetData();
                this.dialogFormVisible = false;
                this.$notify({
                  type: "success",
                  message: "操作成功",
                  position: "bottom-right",
                  showClose: false,
                  duration: 3000
                });
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    // 单个删除
    handleDelete(row) {
      this.del_ids = row.id.toString();
      this.deleteDialogVisible = true;
    },
    // 一键删除
    handleDeleteAll() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning("请勾选要删除的数据");
        return;
      } else {
        let arr = [];
        this.multipleSelection.forEach(item => {
          arr.push(item.id);
        });
        this.del_ids = arr.join(",");
      }
      this.deleteDialogVisible = true;
    },
    // 确认删除
    handleConfirmDel() {
      deleteData(this.del_ids).then(res => {
        if (res.code === 200) {
          this.handleGetData();
          this.deleteDialogVisible = false;
          this.$notify({
            type: "success",
            message: "操作成功",
            position: "bottom-right",
            showClose: false,
            duration: 3000
          });
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClose() {
      this.$refs.form.resetFields();
      this.form = {
        id: undefined,
        parent_id: undefined,
        cate_name: undefined,
        discount_rate: undefined,
        sort: undefined,
        is_show: 0,
        is_join_suit: 0,
        is_join_discount: 0,
        is_join_activity: 0,
        is_join_nobility: 0,
        is_join_rarity: 0
      };
    }
  }
};
</script>

<style></style>
